<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Demo Wang Editor</title>
    <script src="/js/wangEditor.js"></script>
    <base href="/">
    <script src="/js/axios.js/"></script>
    <script src="/js/vue.js"></script>
    <script src="/el/element.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/mystyle.css" >
    <link rel="stylesheet" type="text/css" href="/el/element.css" />
</head>
<body>
<div id="app" >
    <div th:replace="~{common/head-index::head}"></div>
    <div style="margin-top: 80px">
            <p><el-input  placeholder="请输入文章标题" v-model="title" clearable/></p>
            <div id="editor"  class="editor">
                <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
            </div>
            <hr>
            <el-select z-index="10px" v-model="typeid" placeholder="请选择文章类型">
                <el-option
                        v-for="item in types"
                        :key="item.typeid"
                        :label="item.type"
                        :value="item.typeid">
                </el-option>
            </el-select>
            <hr>
            <el-button @click="handleAdd(typeid)">提交</el-button>
            <hr>
                <div v-html="content">
                </div>
        </div>
</div>

</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            title: "",
            content: "",
            types : [],
            editor: null,
            types : [
                {
                    typeid : "1",
                    type : "默认"
                }
            ],
            typeid : "",
            value : "",

        },
        mounted: function() {
            let _this = this;
            this.init()
            _this.loginUser =JSON.parse(sessionStorage.getItem("user"));
            axios.get("/api/public/findAllType").then(function (resp) {
                console.log(resp.data.data)
                //如果等于空的话,就给一个默认的类型
                    _this.types = resp.data.data
            })
            axios.get("/api/public/whetherLogin").then(function (resp) {
                _this.isLogin = resp.data.data
            })
        },

        methods: {
            init: function() {
                var E = window.wangEditor;
                this.editor = new E(document.getElementById('editor'));
                this.editor.config.uploadImgShowBase64 = true
                // 图片上传格式
                // 隐藏网络图片, 把图片转成 base 64
                this.editor.config.pasteFilterStyle = false
                // 自定义颜色
                this.editor.config.colors = ['#000000', '#eeece0', '#1c487f', '#4d80bf', '#c24f4a', '#8baa4a', '#7b5ba1', '#46acc8', '#f9963b', '#ffffff']
                // 配置字体
                this.editor.config.fontNames = ['宋体', '微软雅黑', 'Arial', 'Tahoma', 'Verdana']
                //创建
                this.editor.create();
                // 富文本内容

                this.editor.txt.html();
            },
            outLogin() {
                sessionStorage.clear()
                localStorage.clear()
            },
            handleAdd (typeid){
                let _this = this
                //富文本中的内容
                var content = this.editor.txt.html();
                //上传对象 + 参数
                var title = this.title
                if (_this.title == "" || _this.typeid =="" ){
                    _this.$message({
                        message: '信息必须填写完成！！',
                        type: 'danger'
                    });
                }else{
                    let blogContent = {
                        id  : null,
                        content : content,
                        head : title
                    }
                    axios.post("/api/user/blog/addContent/" + typeid,blogContent).then(function (resp) {
                        // that.content = resp.data.content;
                        if (resp.data.code ==200){
                            _this.$message({
                                message: '发布文章成功,正在跳转到页面',
                                type: 'success',
                                duration:500,　　//显示时间, 毫秒。设为 0 则不会自动关闭，建议1200
                                onClose:()=>{
                                    location.href="/api/user/go2FindInfo"
                                }
                            });
                        }
                    })
                }
            }
        }
    })
</script>
</html>